<template>
    <div class="mainCenter">
        <div class="title">座位类型管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="关键字"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click=""><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="primary" @click="addType"><el-icon>
                            <Plus />
                        </el-icon>添加座位类型</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="typeData.typeList">
                <el-table-column label="类型编号" prop="typeid" />
                <el-table-column align="center" prop="borrowid" label="座位图片" >
                    <template #default="scope" >
                        <div class="bookImage" style="width: 50px;height: 50px;overflow: hidden;margin: 0 auto;">
                            <img :src="scope.row.image" alt="" style="width: 100%;height: 100%;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="座位类型" />
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editType(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteType(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10]" :total="pagetions.count"
                style="float: right;margin-top: 20px;" v-model:page-size="pagetions.num" v-model:current-page="pagetions.page"
                @size-change="pagetions.changeLimit" @current-change="pagetions.jumpPage" />
        </div>
        
        <el-drawer v-model="typeData.isChange" :title="'图书操作'" direction="btt" size="300">
               <editSeatType :typeOne="typeData.typeOne" @emit-change="changeData" @emit-add="addData"></editSeatType>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { reqDeleteSeatType, reqGetSeatTypeList } from '@/api/common';
import { onMounted, reactive, ref, watch } from 'vue';
import editSeatType from './components/editSeatType.vue';
import { SeatType } from '@/types/seat';
import { elementConfirm, tip } from '@/utils/alert';
const typeData=reactive<{typeList:SeatType[],isChange:boolean,isSearch:boolean,typeOne:SeatType|null,index:number}>({
    typeList:[],
    isChange:true,
    isSearch:false,
    typeOne:null,
    index:-1
})

const pagetions=reactive({
    count:0,
    page:1,
    num:5,
    jumpPage(page:number){
        pagetions.page=page
        typeData.isSearch?searchSeatTypeList():getSeatTypeList()
    },
    changeLimit(num:number){
        pagetions.num=num
       typeData.isSearch?searchSeatTypeList():getSeatTypeList()
    }
})

const getSeatTypeList=async()=>{
    let res=await reqGetSeatTypeList(pagetions.num,pagetions.page)
    typeData.typeList=res.data.data.data;
    pagetions.count=res.data.data.count
}

const changeData=(value:any)=>{
    typeData.typeList[typeData.index]=value.info
    console.log(value.info);
    typeData.isChange=value.bool
}

const addData=(value:any)=>{
    typeData.isChange=value
    getSeatTypeList()
}

const searchSeatTypeList=()=>{

}

const deleteType=(idx:number,info:SeatType)=>{
    elementConfirm().then(()=>{
        reqDeleteSeatType(info).then(res=>{
            tip(res.data.info,'success')
            getSeatTypeList()
        })
    })
}

const addType=()=>{
    typeData.isChange=true
    typeData.typeOne=null
    console.log(typeData.isChange);
}

const editType=(idx:number,info:SeatType)=>{
    typeData.index=idx
    typeData.isChange=true
    typeData.typeOne=info
}


onMounted(()=>{
    typeData.isChange=false
    getSeatTypeList()
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -100px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>